import React from 'react';
import './../../form.less';
import { Form, Input, Button, message,DatePicker  } from 'antd';
import moment from 'moment'; // 时间插件 
import BreadcrumbCustom from "../../../common/BreadcrumbCustom";
const FormItem = Form.Item;
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD'; // 定义你需要的时间格式
const monthFormat = 'YYYY-MM'; // 定义你需要的时间格式

class Rate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: "/manage/commnet/addVirtualComment",
    };
  }


  //渲染
  componentDidMount() {

  }

  //提交
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        const param = {
          tUser: {
            username: values.username,
            nickName: values.nickName,
            avatarUrl: values.avatarUrl
          },
          tutorInfo: {
            id: values.tutorInfoId
          },
          userComment: {
            content: values.content,
            createTime: values.createTime.format('YYYY-MM-DD HH:mm:ss'),   
            commentLabels: [
              { labelName: values.labelName1 },
              { labelName: values.labelName2 },
              { labelName: values.labelName3 }
            ],
            star: Number(values.star)
          }
        }
        fetch(this.state.url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(param)
        }).then((response) => {
            return response.json()
        }).then((res) => {
          if (res.code === 200) {
            message.success(res.message);
          }else{
            message.error(res.message);
          }
        })
        console.log(param)
      } else {
        message.error("表单错误");
      }
    });
  };


  render() {
    const {
      visible,
      handleCancel,
      handleSubmit,
      form,
      value
    } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 30 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 15 },
        sm: { span: 15 },
      },
    };
    return (
      <div>
        <BreadcrumbCustom paths={['首页', '添加评论']} />
        <Form layout="horizontal" onSubmit={this.handleSubmit}>
          <Form.Item label="username" hasFeedback {...formItemLayout}>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
              <Input
                placeholder="username"
              />,
            )}
          </Form.Item>
          <Form.Item label="nickName" hasFeedback {...formItemLayout}>
            {getFieldDecorator('nickName', {
              rules: [{ required: true, message: 'Please input your nickName!' }],
            })(
              <Input
                placeholder="nickName"
              />,
            )}
          </Form.Item>
          <Form.Item label="avatarUrl" hasFeedback {...formItemLayout}>
            {getFieldDecorator('avatarUrl', {
              rules: [{ required: true, message: 'Please input your avatarUrl!' }],
            })(
              <Input
                placeholder="avatarUrl"
              />,
            )}
          </Form.Item>
          <Form.Item label="tutorInfoId" hasFeedback {...formItemLayout}>
            {getFieldDecorator('tutorInfoId', {
              rules: [{ required: true, message: 'Please input your tutorInfoId!' }],
            })(
              <Input
                placeholder="tutorInfoId"
              />,
            )}
          </Form.Item>
          <Form.Item label="createTime" hasFeedback {...formItemLayout}>
            {getFieldDecorator('createTime', {
              rules: [{ required: true, message: 'Please input your createTime!' }],
            })(
              // <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
              <DatePicker showTime showToday format="YYYY-MM-DD HH:mm:ss" />
            )}
          </Form.Item>
          <Form.Item label="content" hasFeedback {...formItemLayout}>
            {getFieldDecorator('content', {
              rules: [{ required: true, message: 'Please input your content!' }],
            })(
              <Input
                placeholder="content"
              />,
            )}
          </Form.Item>
          <Form.Item label="标签1" hasFeedback {...formItemLayout}>
            {getFieldDecorator('labelName1', {
              rules: [{ required: false, message: 'Please input your labelName!' }],
            })(
              <Input
                placeholder="labelName"
              />,
            )}
          </Form.Item>
          <Form.Item label="标签2" hasFeedback {...formItemLayout}>
            {getFieldDecorator('labelName2', {
              rules: [{ required: false, message: 'Please input your labelName!' }],
            })(
              <Input
                placeholder="labelName"
              />,
            )}
          </Form.Item>
          <Form.Item label="标签3" hasFeedback {...formItemLayout}>
            {getFieldDecorator('labelName3', {
              rules: [{ required: false, message: 'Please input your labelName!' }],
            })(
              <Input
                placeholder="labelName"
              />,
            )}
          </Form.Item>
          <Form.Item label="star" hasFeedback {...formItemLayout}>
            {getFieldDecorator('star', {
              rules: [{ required: true, message: 'Please input your start!' }],
            })(
              <Input
                placeholder="star"
              />,
            )}
          </Form.Item>
          <Form.Item style={{textAlign:"center"}}>
            <Button type="primary" htmlType="submit">
              submit
          </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

const RateForm = Form.create({})(Rate);
export default RateForm